/**
 * 组件通信
 * props特点：
 * 1. 可以传递任意类型的数据
 * 2. props传递的数据是只读的=》单向数据流
 * 3. constructor()
 */
import React, { Component } from 'react'


// 子组件
const Fnc = (props) => {
  console.log('函数组件接收数据：', props)
  // props.a = 1000
  return (
    <div>
      <h2>函数子组件</h2>
      <p>{props.a}</p>
      {/* 给事件处理函数=》传递实参 =》函数套函数 */}
      <button onClick={() => {
        // 调用
        props.fn(100)
      }}>调用父组件的方法</button>
      {/* 修改父组件的state数据 */}
      <button onClick={props.ca}>修改父组件的state数据a</button>
    </div>
  )
}

class Child extends Component {

  constructor(props) {
    super(props)
    console.log(this.props)
  }

  state = {
    // a: 20000
  }


  render () {
    this.props.b.push(123)
    console.log('类组件接收数据：', this.props)
    return (
      <div>
        <h2>类子组件</h2>
        <p>{this.props.a}</p>
        <p>{this.props.b}</p>
        {
          this.props.tpl
        }
        <button onClick={(e) => {
          // console.log(e)
          this.props.fn(e, 1000)
        }}>调用父组件传递的方法=》子传父</button>
      </div>
    )
  }
}

// 父组件
class Index extends Component {

  state = {
    a: 20000,
    b: [2, 3],
    obj: { a: 2 }
  }

  // 修改共享数据的方法
  changeA = () => {
    this.setState({
      a: Math.random() * 1000
    })
  }

  // 父组件的方法
  parFn = (data) => {
    console.log('我是父组件的方法=>接收子组件数据', data)
  }

  // 子传父
  // 1. 父组件定义接收子组件共享数据的方法
  parData = (e, d) => {
    console.log('接收子组件数据：', e, d)
  }

  render () {
    return (
      <div>
        <h1>组件通信</h1>
        <button onClick={this.changeA}>修改a</button>
        <p>{this.state.b}</p>
        <hr />
        <Fnc a={this.state.a} ca={this.changeA} fn={this.parFn} str='str' obj={this.state.obj} isShow={true} />
        <hr />
        <Child a={this.state.a} fn={this.parData} b={this.state.b} tpl={<p>123</p>} isHide={false} />
      </div>
    )
  }
}

export default Index


